<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

  <!--<script src="../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>-->

</head>
<body>
Root
<div id="host">Host</div>
<div id="atcq-root"></div>

<hr>

<template id="atcq">
  <p class="response"></p>
  <script>
    (function () {
      var p = true;//confirm('You on point Tip?');
      var responseEl = document.querySelector('#atcq-root')
        .shadowRoot
        .querySelector('.response');
      console.log(document.querySelector("#atcq-root").shadowRoot);
      if (p) {
        responseEl.innerHTML = "All the time Phife";
      } else {
        responseEl.innerHTML = "Check the rhyme y\'all"
      }
    })()
  </script>
</template>
<script>
  var host = document.querySelector('#host')
  var shadowRoot = host.createShadowRoot()

  var root = document.querySelector("#atcq-root").createShadowRoot()
  var template = document.querySelector("#atcq")
  root.appendChild(template.content)
</script>
</body>
</html>